<template>
     
    <div style="width:100%;display: flex;justify-content: center;">
    <div class="container" style="margin:20px 20px;width:100%">
        <div class="jumbotron"  v-show="imgurl" :style="{ backgroundImage: 'url('+imgurl+')',backgroundSize: 'cover',backgroundRepeat: 'no-repeat',backgroundPosition: 'center'}">
        </div>
        <div class="d-flex justify-content-center align-items-center "  v-show="!imgurl" style="height: 100px;background-color:#fff;">
                <h1>调查问卷</h1>
            </div>
        <div id="content" style="background-color:#fff;margin-top: 10px;">
        

    
    
<div v-for="(item,value) in datas" :key="value" style="margin:10px 0" :id="`answer${value}`" >
  <h4 style="padding: 15px 2px;text-align: center;background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);border-bottom: 1px solid #f1f1f1;">{{item.title}}</h4>
        <ul class="list-group" v-for="(item1,value) in item.questionList" :key="value" style="margin:10px 0" :id="`answer${value}`">
            <radioview :datalist="item1" :questionnaireId="item.questionnaireId" @ontest="ontest" v-if="item1.type==1"></radioview>
            <checkboxview :datalist="item1"  :questionnaireId="item.questionnaireId" @ontest="ontest" v-if="item1.type==2"></checkboxview>
            <shortanswerview :datalist="item1"  :questionnaireId="item.questionnaireId" @ontest="ontest" v-if="item1.type==3"></shortanswerview>     
        </ul>

      </div>
</div>

<div style="display: flex;justify-content: center;"> <a class="btn btn-primary btn-lg" role="button" @click="submit()">
            提交</a></div>
       
    </div>
    </div>

  </template>
  
  <script>
  import RadioView from '@/components/RadioView.vue';
  import CheckboxView from '@/components/CheckboxView.vue';
  import ShortanswerView from '@/components/Shortanswer.vue';
  import axios from 'axios'
  import service from '@/utils/request';
import { setTimeout } from 'core-js';
  export default {
  components: {   'radioview': RadioView,
    'checkboxview': CheckboxView,
    'shortanswerview':ShortanswerView,
   },
   beforeCreate: function () {
    // 执行在实例完全创建之前需要的操作
    var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) === 'micromessenger') {
    console.log('是微信浏览器1')
    return true;
  } else {
    console.log('不是微信浏览器1')
    return false;
  }

  },
    data(){
        return{
        xd:[],
        obj1:{},
        datas:[],
        questionnaireId:'',
        imgurl:'',
        isLoading:true
        }
    },
    created() {
      this.datalist()
  },
  mounted(){
    setTimeout(()=>{
      this.isLoading=false
    },2000)
  },



    methods:{
        ontest(idx) {
          console.log(idx)
          this.xd=  this.xd.filter(item => item.questionId !== idx.questionId);
            this.xd.push(idx)
      // 将proxy对象转成 普通数组

            console.log(this.xd)
       },
       datalist:function(e=1){
          service.get('/prod-api/system/api/questionnaire/getQuestionnaire?questionnaireId=8').then(response => {    
            console.log(response)     
              this.datas=response.data.questionnaireList
              this.questionnaireId=response.data.questionnaireId
              this.imgurl=response.data.imgUrl
        
            }).catch(function (error) {
                console.log(error);
            });
        },
        submit:function(){
          let userInfo=   JSON.parse(localStorage.getItem("userinfo"))
          if(userInfo===null)
          {

          }
          else
          {
          this.obj1={userId:userInfo.userId,openid:userInfo.openId,questionnaireId:this.questionnaireId}
          this.obj1.result=this.xd
          console.log('=======',JSON.stringify(this.obj1))
          try {  
                  const response =  axios.post('/prod-api/system/api/questionnaire/setAnswers',this.obj1);  
                  response.then((msg)=>{
                    console.log('xxxxxxxxx',msg)
                    if(msg.data.code==200)
                  {
                    alert('提交成功')
    setTimeout(() => {
      this.$router.push({
      path: "/",
      query: {
        content: JSON.stringify({ id: this.userid }),
      },
    });
    }, 1500);
 
                  } 
                  else
                  {
                    alert('提交失败')
                  }
                  })
   
        
                  } catch (error) {  
                  console.error('Error sending POST request:', error);  
                  }  
          } 
}
    },   
    name: 'List',
    computed:{
        
}
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style >
  .cl{
    display: flex;
  }
  </style>
  